<template>
	<view>
		<view v-if="!isLogin" class="login flex-col col-center row-center" style="height: 100vh;">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
			<image :src="imgUrl + '/wechat/static/images/goods_null.png'" v-show="!isLogin"></image>
			<router-link to="/pages/login/login">
				<view class="muted mt20" style="font-size: 36rpx;" v-show="!isLogin">请先登录商城</view>
			</router-link>
		</view>
		<view v-else class="view_box">
			<loading-view v-if="isShowLoadingView"></loading-view>
			<view class="top_nav_bar" :style="'zIndex:999;top:'+ menuButtonInfo.pos_top_height +'px'">
				<view class="float_bar"><float-cart-search></float-cart-search></view>
			</view>
			<view>
				<view><image style="width: 750rpx; height: 1018rpx;"  :src="imgUrl + '/wechat/static/images/services.jpg'"></image></view>
				<view class="member_line" @tap="goProductPage()">
					<view class="left">
						<text class="big_text">我的产品</text>
						<text class="sub_text">MY PRODUCT</text>
					</view>
					<view class="right"><image src="/static/images/arrow_right.png"></image></view>
				</view>
				<view class="member_service">
					<view class="left"  @tap="goServicePage(goodsDetail, 2)">
						<u-icon name="/static/images/recycle.png" size="120" ></u-icon>
						<view class="product_text">可持续羽绒</view>
					</view>
					<view class="right"  @tap="goServicePage(goodsDetail, 1)">
						<u-icon name="/static/images/washer.png" size="120" ></u-icon>
						<view class="product_text">羽邻服务</view>
					</view>
				</view>
			</view>
			<view class="member_box1 flex-col">
				<shop-arc-mask :aid="arcAid" :goodsDetail="goodsDetail" :service_type="service_type" :showmask="showArc"
					@hidePopMask="hidePopMask"></shop-arc-mask>
				<view class="fixed-button">
					<router-link to="/bundle/pages/contact_offical/contact_offical">
						<image style="width: 80rpx; height: 80rpx;" :src="imgUrl + '/wechat/static/images/icon_contact.png'"></image>
					</router-link>
				</view>
			</view>
			
		</view>
		
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getMyOrderGoods,
		addMyOrderGoods
	} from '@/api/user';
	import {
		mapGetters
	} from 'vuex';
	import {
		loadingType
	} from '@/utils/type';
	// import {
	// 	getRect,
	// 	trottle
	// } from '@/utils/tools';
	import {
		DISTRIBUTION,
		DISTRIBUTIONID,
		INVITE_CODE
	} from '@/config/cachekey';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				productUrl:'/bundle/pages/my_goods/my_goods',
				isShowLoadingView:false,
				item_id: 0,
				imgMood: 'aspectFit',
				goods_factory_code: '',
				actionText: "识别",
				showArc: false,
				goodsDetail: {},
				service_type: 0,
				arcAid: 0,
				goodsValue: '',
				imgUrl: `${this.$imgUrl}`,
				upOption: {
					auto: false,
					empty: {
						icon: `${this.$imgUrl}/wechat/static/images/goods_null.png`,
						tip: "暂无商品",
					}
				},
				menuButtonInfo: {},
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				goodsCount: 0,
				goodsList: [],
			};
		},
		onShow() {
			if(!this.isLogin){
				// setTimeout(() => {
				// 	this.$Router.push('/pages/login/login')
				// }, 2000)
				return
			}
			console.log('==============onShow====================-----------');
			this.isShowLoadingView = true;
			this.getGoodsDetailFun();
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
			// this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
			// this.isShowLoadingView = true;
		},
		computed: {
			...mapGetters(['sysInfo'])
		},
		methods: {
			openExternalLink(ref_url) {
			  this.$Router.push({
			  	path: '/pages/webview/webview',
			  	query: {
			  		url: ref_url
			  	}
			  }) 
			},
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo.pos_top_height =  this.menuButtonInfo.top;
				this.menuButtonInfo.pos_logo_top_height =  this.menuButtonInfo.pos_top_height + 30;
			},
			goProductPage(){
				if(this.goodsCount>0){
					this.$Router.push({
						path: '/bundle/pages/my_goods/my_goods',
					})
				}else{
					this.$toast({
						title: "请先扫码添加商品"
					}, {
						tab: 2,
						url: '/bundle/pages/circulate/addgoods'
					});
					// setTimeout(() => {
					// 	this.$Router.push('/bundle/pages/circulate/addgoods')
					// }, 2000)
					return;
				}
			},
			goPage(url){
				this.$Router.push({
					path: url,
				})
			},
			goServicePage(goodsDetail, service_type) {
				if(service_type == 1){
					this.$toast({
						title: "暂未开通，敬请期待",
					});
					return;
				}
			    this.$Router.push({
			    	path: '/bundle/pages/circulate/circulate',
			    	query: {
			    		service_type: service_type,
						item_id:goodsDetail.item_id
			    	}
			    })
			},
			previewImage(imageUrl) {
				uni.previewImage({
				    imageUrl,
				    urls: [imageUrl] // 需要预览的图片http链接列表
				});
			},
			async getGoodsDetailFun() {
				console.log('-------------getGoodsDetailFun-----------------------------------------');
				const {
					data,
					code
				} = await getMyOrderGoods({});
				if (code == 1) {
					if (data.count == 0) {
						this.goodsCount = 0;
					}else{
						this.goodsCount = data.count;
						this.goodsList = data.lists;
					}
					this.isShowLoadingView = false;
				} else {
					this.goodsList = [];
					// this.isNull = true
					this.isShowLoadingView = false;
				}
			},
			popAgreement(goodsDetail, service_type) {
				if (service_type == 1) {
					this.arcAid = 110; //弹出的文档ID
				} else if (service_type == 2) {
					this.arcAid = 120; //弹出的文档ID
				}
				this.goodsDetail = goodsDetail;
				this.showArc = true;
				this.service_type = service_type; //1:清洗服务;2羽绒回收
			},
			hidePopMask() {
				this.showArc = false;
			},
			getScanCodeResult(res) {
				this.goodsValue = res;
				this.actionText = '查询';
				this.isShowLoadingView = true;
				console.log('============getScanCodeResult==========-----------');
				this.getGoodsDetailFun();
			},
			clear() {
				this.goodsValue = "";
				this.actionText = '识别';
			},
			inputChange() {
				this.actionText = '查询';
			},
			downCallback() {
				this.onRefresh()
			},

			onChange(e) {
				this.keyword = e.value
			},
			init(option) {
				const {
					id,
					name,
					type
				} = this.$Route.query
				this.type = type
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.$nextTick(() => {
						this.onRefresh()
					})
				} else {
					uni.setNavigationBarTitle({
						title: '会员服务'
					});
					this.showHistory = true
				}
			},

			onClear() {
				if (this.id) {
					this.onRefresh();
				}
			},
			// onSearch(keyword) {
			// 	this.goodsValue = keyword;
			// 	this.getGoodsDetailFun();
			// },
			onRefresh() {
				this.goodsList = []
				this.mescroll.resetUpScroll();
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}
	.primary-border{
		color: $-color-primary;
		border: $-primary-border;
	}
	.view_box{
		margin-bottom: 60rpx;
	}
	.top_nav_bar{
		position: fixed;
		z-index: 999;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.float_bar{
			margin-left: 20rpx;
			border: $-color-border solid 2rpx;
			border-radius: 30rpx;
		}
		.logo_text{
			width: 240rpx;
			margin-left: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.member_line{
		display: flex; 
		flex-direction: row; 
		justify-content: space-between;
		align-items: center;
		border-bottom: $-solid-border;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		.left{
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.big_text{
				color: $-color-black1;
				font-size: 40rpx;
				font-weight: 700;
				margin-bottom: 4rpx;
				font-family: 'MiSans-Medium';
			}
			.sub_text{
				font-size: small;
				color: $-color-black1;
			}
		}
		.right{
			margin-right: 30rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	
	
	.member_service{
		display: flex;
		flex-direction: row; 
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		.product_text{
			width: 365rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
		}
		.left{
			padding-left: 50rpx;
			width: 365rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border-right: solid 1rpx $-color-border;
			
		}
		.right{
			padding-right: 50rpx;
			flex-direction: column;
			width: 365rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.icon_add_plus{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background-color: $-color-gray2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods_info {
		border: $-color-border-light;
		border-radius: 20rpx;
		// padding: 20rpx;
		background-color: $u-bg-color;
		margin-bottom: 30rpx;
	}

	.member_box1 {
		display: flex;
		flex-direction: column;
		position: relative;
		top: 60rpx;
		padding-bottom: 30rpx;
		margin-bottom: 120rpx;
		.header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
			.search {
				position: relative;
				z-index: 1;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			// margin: 30rpx;
			line-height: 42rpx;

			.info_title {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				.title{
					font-size: smaller;
				}

				.spec_value_str {
					font-size: small;
					color: $-color-muted;
				}
			}
			
			.bigImg{
				
			}

			// .usual-item-img{
			// 	display: block;
			// 	width: 500rpx;
			// 	height: auto !important;
			// 	overflow: visible;
			// }
		}

		.service_button {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.line {
				width: 60%;
				margin-top: 20rpx;
			}
		}
		.search_button {
			margin-top: 30rpx;
		}
		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}

	.fixed-button {
			position: fixed;
			/* 固定在屏幕上 */
			bottom: 22%;
			/* 距离屏幕底部的距离 */
			right: 35rpx;
			/* 圆角，使其看起来更像一个圆形按钮 */
			z-index: 99;
			/* 提高层级，确保按钮在其他内容之上 */
			display: flex;
		}
	}
</style>